import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
  Linking,
  PermissionsAndroid,
} from 'react-native';
import RNFileSelector from 'react-native-file-selector';
import {setToastMsg} from '../../../actions/index';
import {updataExeDoc} from '../../../api/index';
import {relativeTimeRounding} from 'moment';
//import {getData} from '../storageImpl';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
let purple = '#8587FF';
let width = Dimensions.get('window').width;
let height = Dimensions.get('window').height;
let headerHeightRatio = 0.044;
let barLength = widthScreen * 0.9;
let red = '#FF6666';
let yellow = '#FF9933';
let executeDocUrl = '';
let executeDocTitle = '';
let blue = '#45BAFF';
let hostAddress = 'http://47.104.75.42:9000';
//let id = 0;
let proposalInformation; //= require('./staticProposalInfo');
let proposalId = 0;
let filePath = '';
let fileNAME = '';
let token = '';
class Button1 extends Component {
  render() {
    return (
      <View style={proposalInfoPageStyle.updateButton}>
        <Text style={proposalInfoPageStyle.updateButtonText}>上传报告</Text>
      </View>
    );
  }
}
class Button2 extends Component {
  render() {
    return (
      <View style={proposalInfoPageStyle.updatedButton}>
        <Text style={proposalInfoPageStyle.updatedButtonText}>报告已上传</Text>
      </View>
    );
  }
}
//TODO 这篇算是有很多改动
export default class Execute extends Component {
  // static defaultProps = {
  //     stage: 0,
  //     executeDocTitle: proposalInformation.data[proposalId].executeDocTitle,
  //     executeDocUrl: proposalInformation.data[proposalId].executeDocUrl,
  //     role: proposalInformation.data[proposalId].role,
  // };
  constructor(props) {
    super(props);
    this.state = {
      ver: 1,
      updated: true,
      fileName: '',
      docup: 1,
      //id:0,
      start: 0,
      openReadResquest: 0,
    };
    token = this.props.token;
    //alert(token);
  }
  changeButton() {
    if (this.state.docup === 0 && this.state.updated === true) {
      this.setState({updated: false});
    }
    //this.updateExecuteDocURL();
    //else this.setState({updated: true})
  }
  componentDidMount() {
    /*this.setState({
          id:this.props.id,
        })*/
    //alert(this.props.id);
    // if(this.props.executeDocUrl!==undefined) {
    //   executeDocUrl=this.props.executeDocUrl;
    //   executeDocTitle=this.props.executeDocTitle;
    // }
    //alert(this.props.executeDocTitle);
  }

  downloadFile(url) {
    // ToastAndroid.show('下载中...', ToastAndroid.SHORT);
    // ToastAndroid.show(this.props.executeDocUrl, ToastAndroid.SHORT);
    Linking.canOpenURL(url)
      .then(supported => {
        if (!supported) {
          console.log("Can't handle url: " + url);
          // return Linking.openURL(url);
        } else {
          return Linking.openURL(url);
        }
      })
      .catch(err => console.error('An error occurred', err));
  }
  selectFile() {
    if (this.state.openReadResquest === 0) {
      this.requestReadPermission();
      this.setState({
        openReadResquest: 1,
      });
    }
    console.log('begin select files');
    RNFileSelector.Show({
      title: 'Select File',
      onDone: path => {
        console.log('file selected: ' + path);
        filePath = 'file://' + path;
        this.setState({
          fileName: filePath.substr(filePath.lastIndexOf('/') + 1),
        });
        fileNAME = this.state.fileName;
        //alert(fileNAME);
        //alert(docup);
        //docup = 0;
        this.setState({
          docup: 0,
        });
        //this.props.stage=4;
        //this.changeButton();
      },
      onCancel: () => {
        console.log('cancelled');
      },
    });
  }
  async requestReadPermission() {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('现在你获得读取权限了');
      } else {
        console.log('用户并不屌你');
      }
    } catch (err) {
      console.warn(err);
    }
  }
  updateExecuteDocURL() {
    // if (this.state.docup === 1) {
    //   this.setState({
    //     docup: 0,
    //   });
    // }
    this.selectFile();
  }
  async ProposalUp() {
    setToastMsg('正在上传');
    //alert();
    //alert(this.props.id);
    let parameter = {
      id: this.props.id,
      executeDocTitle: fileNAME,
      files: {
        uri: filePath,
        type: 'multipart/form-data',
        name: fileNAME,
      },
    };
    let result = await updataExeDoc(parameter);
    try {
      if (result.error_code === 0 || result.error_code === '0') {
        setToastMsg('上传成功');
      } else {
        setToastMsg('上传失败');
      }
    } catch (e) {
      setToastMsg('上传失败');
    }
  }
  render() {
    //TODO:执行render
    //alert(this.state.updated);
    if (this.props.stage === 3 && this.props.role === 0) {
      return (
        <View
          style={{
            marginTop: heightScreen * 0.009,
            width: widthScreen,
            height: heightScreen * 0.149,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.purpleRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>执行阶段</Text>
                <Text style={proposalInfoPageStyle.purpleSubtitle2}>
                  正在进行...
                </Text>
              </View>
              <View style={proposalInfoPageStyle.purpleLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.graySubtitle}>等待</Text>
            <Text style={proposalInfoPageStyle.purpleSubtitle}>执行董事</Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>提交报告</Text>
          </View>
          <Text
            style={{
              marginTop: heightScreen * 0.03,
              marginLeft: widthScreen * 0.048,
              color: '#9999FF',
              fontSize: heightScreen * 0.0165,
              //fontFamily: 'MicrosoftYaHei',
            }}>
            静待花开，执行董事正奋力落实提案中...
          </Text>
        </View>
      );
    } else if (this.props.stage === 3 && this.props.role === 1) {
      return (
        <View
          style={{
            marginTop: heightScreen * 0.009,
            width: widthScreen,
            height: heightScreen * 0.273,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.purpleRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>执行阶段</Text>
                <Text style={proposalInfoPageStyle.purpleSubtitle2}>
                  正在进行...
                </Text>
              </View>
              <View style={proposalInfoPageStyle.purpleLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.graySubtitle}>等待</Text>
            <Text style={proposalInfoPageStyle.purpleSubtitle}>执行董事</Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>提交报告</Text>
          </View>

          <TouchableOpacity
            style={{
              marginTop: heightScreen * 0.01,
              width: widthScreen * 0.753,
            }}>
            <View
              style={{
                marginLeft: widthScreen * 0.053,
                width: widthScreen * 0.72,
                height: heightScreen * 0.131,
                borderWidth: 0.8,
                borderColor: purple,
              }}>
              <View
                style={{flexDirection: 'row', marginTop: heightScreen * 0.013}}>
                <View
                  style={{
                    width: heightScreen * 0.058,
                    height: heightScreen * 0.075,
                    backgroundColor: purple,
                    marginLeft: widthScreen * 0.051,
                  }}>
                  <View
                    style={{
                      width: heightScreen * 0.014,
                      height: heightScreen * 0.014,
                      borderTopColor: '#FFFFFF',
                      borderTopWidth: heightScreen * 0.007,
                      borderRightColor: purple,
                      borderRightWidth: heightScreen * 0.007,
                      borderBottomColor: purple,
                      borderBottomWidth: heightScreen * 0.007,
                      borderLeftColor: '#FFFFFF',
                      borderLeftWidth: heightScreen * 0.007,
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                </View>
                <TouchableOpacity
                  onPress={() => {
                    this.updateExecuteDocURL();
                  }}>
                  <Text
                    style={{
                      width: widthScreen * 0.469,
                      height: heightScreen * 0.051,
                      color: '#333333',
                      lineHeight: heightScreen * 0.025,
                      fontSize: heightScreen * 0.017,
                      marginTop: heightScreen * 0.008,
                      marginLeft: widthScreen * 0.051,
                    }}>
                    {this.state.docup === 1
                      ? '点击此处选择文档'
                      : this.state.fileName}
                  </Text>
                </TouchableOpacity>
              </View>
              <View
                style={{
                  width: widthScreen * 0.72,
                  flexDirection: 'row',
                  marginTop: heightScreen * 0.009,
                  justifyContent: 'space-between',
                }}>
                <Text
                  style={{
                    marginLeft: widthScreen * 0.018,
                    color: purple,
                    fontSize: heightScreen * 0.015,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  {this.state.docup === 1 ? '文档未上传' : '文档已上传'}
                </Text>
              </View>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              //this.changeButton();
              if (this.state.docup === 0) {
                this.ProposalUp();
                this.changeButton();
              } else {
                alert('未上传文件,请先上传文件');
              }
            }}
            style={{
              marginLeft: widthScreen * 0.05,
              width: widthScreen * 0.235,
            }}>
            {this.state.updated === true ? <Button1 /> : <Button2 />}
            {/*<View*/}
            {/*  style={*/}
            {/*    this.state.updated*/}
            {/*      ? proposalInfoPageStyle.updateButton*/}
            {/*      : proposalInfoPageStyle.updatedButton*/}
            {/*  }>*/}
            {/*  <Text*/}
            {/*    style={*/}
            {/*      this.state.updated*/}
            {/*        ? proposalInfoPageStyle.updateButtonText*/}
            {/*        : proposalInfoPageStyle.updatedButtonText*/}
            {/*    }>*/}
            {/*    {this.state.updated ? '上传报告' : '报告已上传'}*/}
            {/*  </Text>*/}
            {/*</View>*/}
          </TouchableOpacity>
        </View>
      );
    } else if (this.props.stage > 3) {
      return (
        <View
          style={{
            marginTop: heightScreen * 0.009,
            width: widthScreen,
            height: heightScreen * 0.273,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.purpleRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>执行阶段</Text>
                <Text
                  style={{
                    marginTop: heightScreen * 0.0085,
                    marginLeft: widthScreen * 0.008,
                    color: '#999999',
                    fontSize: heightScreen * 0.0165,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  报告已上传~
                </Text>
              </View>
              <View style={proposalInfoPageStyle.purpleLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            {/*<Text style={proposalInfoPageStyle.graySubtitle}>等待</Text>*/}
            <Text style={proposalInfoPageStyle.purpleSubtitle}>执行董事</Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>已提交报告</Text>
          </View>
          <View style={{height: heightScreen * 0.02}} />
          <TouchableOpacity
            onPress={() => this.downloadFile(this.props.executeDocUrl)}
            style={{width: widthScreen * 0.753}}>
            <View
              style={{
                marginLeft: widthScreen * 0.053,
                width: widthScreen * 0.72,
                height: heightScreen * 0.131,
                borderWidth: 0.8,
                borderColor: purple,
              }}>
              <View
                style={{flexDirection: 'row', marginTop: heightScreen * 0.013}}>
                <View
                  style={{
                    width: heightScreen * 0.058,
                    height: heightScreen * 0.075,
                    backgroundColor: purple,
                    marginLeft: widthScreen * 0.051,
                  }}>
                  <View
                    style={{
                      width: heightScreen * 0.014,
                      height: heightScreen * 0.014,
                      borderTopColor: '#FFFFFF',
                      borderTopWidth: heightScreen * 0.007,
                      borderRightColor: purple,
                      borderRightWidth: heightScreen * 0.007,
                      borderBottomColor: purple,
                      borderBottomWidth: heightScreen * 0.007,
                      borderLeftColor: '#FFFFFF',
                      borderLeftWidth: heightScreen * 0.007,
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                  <View
                    style={{
                      width: heightScreen * 0.034,
                      height: heightScreen * 0.0008,
                      marginLeft: heightScreen * 0.012,
                      marginTop: heightScreen * 0.004,
                      marginBottom: heightScreen * 0.0085,
                      backgroundColor: '#FFFFFF',
                    }}
                  />
                </View>
                <Text
                  style={{
                    width: widthScreen * 0.469,
                    height: heightScreen * 0.051,
                    color: '#333333',
                    lineHeight: heightScreen * 0.025,
                    fontSize: heightScreen * 0.017,
                    marginTop: heightScreen * 0.008,
                    marginLeft: widthScreen * 0.051,
                  }}>
                  {this.props.executeDocTitle}
                </Text>
              </View>
              <View
                style={{
                  width: widthScreen * 0.72,
                  flexDirection: 'row',
                  marginTop: heightScreen * 0.009,
                  justifyContent: 'space-between',
                }}>
                <Text
                  style={{
                    marginLeft: widthScreen * 0.018,
                    color: purple,
                    fontSize: heightScreen * 0.015,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  上传人：{this.props.faqirenName}
                </Text>
                <Text
                  style={{
                    marginRight: widthScreen * 0.018,
                    color: purple,
                    fontSize: heightScreen * 0.015,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  点击可下载文档查看
                </Text>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      );
    }
  }
}

const proposalInfoPageStyle = StyleSheet.create({
  avatar1: {
    marginLeft: widthScreen * 0.002,
    backgroundColor: '#CCCCCC',
    width: heightScreen * 0.038,
    height: heightScreen * 0.038,
    borderRadius: heightScreen * 0.019,
  },
  avatar2: {
    marginTop: heightScreen * 0.007,
    marginRight: widthScreen * 0.013,
    backgroundColor: '#CCCCCC',
    width: heightScreen * 0.038,
    height: heightScreen * 0.038,
    borderRadius: heightScreen * 0.019,
  },
  title: {
    marginTop: heightScreen * 0.001,
    marginBottom: heightScreen * 0.002,
    marginLeft: widthScreen * 0.012,
    fontSize: heightScreen * 0.022,
    color: '#000000',
    //fontFamily: 'MicrosoftYaHei',
    fontWeight: '400',
  },
  graySubtitle: {
    color: '#999999',
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  purpleSubtitle: {
    color: purple,
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  purpleSubtitle2: {
    marginTop: heightScreen * 0.0085,
    marginLeft: widthScreen * 0.008,
    color: '#9999FF',
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  purpleRect: {
    marginTop: heightScreen * 0.002,
    width: widthScreen * 0.02,
    height: heightScreen * 0.033,
    backgroundColor: purple,
  },
  purpleLine: {
    marginLeft: widthScreen * 0.011,
    height: 1,
    width: widthScreen * 0.38,
    backgroundColor: purple,
  },
  updateButton: {
    backgroundColor: purple,
    marginTop: heightScreen * 0.022,
    height: heightScreen * 0.035,
    width: widthScreen * 0.235,
    borderRadius: 0.008 * widthScreen,
    alignItems: 'center',
    justifyContent: 'center',
  },
  updateButtonText: {
    color: '#FFFFFF',
    marginBottom: heightScreen * 0.002,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
  },
  updatedButton: {
    borderWidth: 0.5,
    borderColor: purple,
    marginTop: heightScreen * 0.022,
    height: heightScreen * 0.035,
    width: widthScreen * 0.235,
    borderRadius: 0.008 * widthScreen,
    alignItems: 'center',
    justifyContent: 'center',
  },
  updatedButtonText: {
    color: purple,
    marginBottom: heightScreen * 0.002,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
  },
});
